<template>
  <div class="photoinfo-container">
    <!-- 头部 -->
    <h3 class="title">图片标题</h3>
    <p class="subtitle">
        <span>发表时间{{"2020-10-26 12:00:00" | dateFormat()}}</span>
        <span>点击:0次</span>
    </p>
    <hr>
    <!-- 缩略图 -->
    <div class="thumbs">
        <vue-preview :slides="slide"  @close="handleClose"></vue-preview>
    </div>
    <!-- 内容描述 -->
    <div class="content" v-html="photoinfo"></div>
    <!-- 评论组件 -->
    <hr>
    <cmt-box></cmt-box>
  </div>
</template>

<script>
import Comment from '../../components/comment.vue'
export default {
    name: 'photoInfo',
    data(){
        return {
            id: this.$route.params.id,
            slide: [
                {
                    src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                    msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                    alt: 'picture1',
                    title: 'Image Caption 1',
                    w: 600,
                    h: 400
                },
                {
                    src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
                    msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
                    alt: 'picture2',
                    title: 'Image Caption 2',
                    w: 1200,
                    h: 900
                },
                {
                    src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                    msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                    alt: 'picture1',
                    title: 'Image Caption 1',
                    w: 600,
                    h: 400
                },
                {
                    src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
                    msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
                    alt: 'picture2',
                    title: 'Image Caption 2',
                    w: 1200,
                    h: 900
                },
                {
                    src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                    msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                    alt: 'picture1',
                    title: 'Image Caption 1',
                    w: 600,
                    h: 400
                },
                {
                    src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
                    msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
                    alt: 'picture2',
                    title: 'Image Caption 2',
                    w: 1200,
                    h: 900
                }
            ],
            photoinfo:"川菜是中国汉族传统的四大菜系之一、中国八大菜系之一、中华料理集大成者。川菜三派的划分，是在已有定论的上河帮、小河帮、下河帮的基础上，规范化完整表述为：上河帮川菜即以川西成都、乐山为中心地区的蓉派川菜；小河帮川菜即以川南自贡为中心的盐帮菜"
        };
    },
    mounted(){
        this.getPhotoInfo();
    },
    components:{
        'cmt-box': Comment
    },
    methods: {
        getPhotoInfo(){
            //TODO 获取图片的详情
        },
        handleClose () {
        console.log('close event')
      }
    },
}
</script>

<style lang="less">
.photoinfo-container{
    padding: 0 4px 50px 4px;
    .title{
        font-size: 18px;
        text-align: center;
        margin: 10px 0;
        color: #31a4fc;
    }
    .subtitle{
        font-size: 14px;
        color: #ccc;
        display: flex;
        justify-content: space-between;
    }
    .my-gallery{
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        figure{
            margin: 10px;
        }
        img{
            width: 100px;
            border-radius: 4px;
            box-shadow: 0 0 10px #ccc;
        }
    }
    .content{
        font-size: 14px;
        line-height: 20px;
    }
}
</style>>